<?php
/**
 * @link https://www.kancloud.cn/cleverstone/ymb2
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

namespace builder\test\controllers;

use builder\base\BaseController;
use builder\helper\H5;
use builder\table\TableBuilder;
use builder\widget\ajax\Accordion;
use builder\widget\ajax\ButtonDropdown;
use builder\widget\ajax\LayCarousel;
use builder\widget\ajax\Modal;
use builder\widget\ajax\Timeline;
use builder\widget\WidgetFacade;

/**
 * 小部件
 */
class WidgetController extends BaseController
{
    public $publicActions = [
        'index',
        'progress',
        'carousel',
        'other',
    ];

    public function actionIndex(): string
    {
        $this->view->title = 'layui时间线';
        $content = Timeline::widget([
            'data' => [
                ['icon' => 'bi bi-apple', 'title' => '有何不可', 'content' => '许嵩<br/>天空好像下雨，我好想住在你家隔壁。'],
                ['icon' => 'bi bi-apple', 'title' => '玫瑰花的葬礼', 'content' => '许嵩<br/>天空好像下雨，我好想住在你家隔壁。'],
                ['icon' => 'bi bi-apple', 'title' => '素颜', 'content' => '许嵩<br/>天空好像下雨，我好想住在你家隔壁。'],
                ['icon' => 'bi bi-apple', 'title' => '忽而今夏', 'content' => '许嵩<br/>天空好像下雨，我好想住在你家隔壁。'],
                ['icon' => 'bi bi-apple', 'title' => '断桥残雪', 'content' => '许嵩<br/>天空好像下雨，我好想住在你家隔壁。'],
            ],
            'options' => [
                'root' => [
                    'class' => ['px-5'],
                    'style' => ['color' => 'purple'],
                    'attribute' => ['data-test' => 1],
                ],
                'content' => [
                    'style' => ['color' => 'brown'],
                    'attribute' => ['data-test' => 2],
                ],
            ],
        ]);
        return $this->renderContentX($content, !!@$this->get['_partial']);
    }

    public function actionProgress(): string
    {
        return $this->renderContentX(H5::tag('ngx-layuiprogress', '', [
            'bg-color' => 'primary',
            'progress-size' => 'big',
            'lay-showpercent' => 'true',
            'value' => '50%',
            'lay-filter' => 'progress_demo',
            //'ng-model' => 'aaaaaaa',
        ]), !!@$this->get['_partial']);
    }

    public function actionCarousel(): string
    {
        $onChange = <<<JS
return function(obj) {
  console.log(obj);
}
JS;
        return $this->renderContentX(LayCarousel::widget([
            'width' => '620px',
            'height' => '300px',
            'full' => false,
            'anim' => 'fade',
            'autoplay' => true,
            'interval' => 2000,
            'index' => 0,
            'arrow' => 'always',
            'indicator' => 'inside ',
            'trigger' => 'click',
            'onchange' => $onChange,
            'items' => [
                H5::img('/uploads/IMAGE/816c29313f37fd402c2f650d5de94f22.jpg'),
                H5::img('/uploads/IMAGE/04d5c3c208e7e805572fd9b7c53af44b.webp'),
                H5::img('/uploads/IMAGE/d22ebf0418770f31bd1c148c84212fc5.webp'),
                H5::img('/uploads/IMAGE/5a4abdf2d0c2d0eddb4414e15787eb42.webp'),
                H5::img('/uploads/IMAGE/a421319d2f3fb4b8559ff2970dd7e9e7.webp'),
            ],
        ]), !!@$this->get['_partial']);
    }

    public function actionOther()
    {
        $tableBuilder = TableBuilder::instance();
        if ($this->isAjax) {
            $tableBuilder->setPage(true)
                ->setQuery(function () {
                    $tmp = [];
                    for ($i = 0; $i < 1000; $i++) {
                        $tmp[$i] = ['a', 'b', 'c', 'd', 'e', 'f', 'j', 'h'];
                    }
                    return $tmp;
                })
                ->setColumns([
                    'col1' => function () {
                        return Accordion::widget([
                            'items' => [
                                ['label' => 'Collapsible Group Item #1', 'content' => 'Fist Anim pariatur cliche...', 'expand' => false],
                                ['label' => 'Collapsible Group Item #2', 'content' => 'Second Anim pariatur cliche...', 'expand' => false],
                                ['label' => 'Collapsible Group Item #3', 'content' => 'Third Anim pariatur cliche...', 'expand' => false],
                                ['label' => 'Collapsible Group Item #4', 'content' => 'Fourth Anim pariatur cliche...', 'expand' => false],
                                ['label' => 'Collapsible Group Item #5', 'content' => 'Fifty Anim pariatur cliche...', 'expand' => false],
                            ],
                        ]);
                    },
                    'col2' => function () {
                        return ButtonDropdown::widget([
                            'label' => 'Action',
                            'dropdown' => [
                                'items' => [
                                    ['label' => 'DropdownA', 'url' => '/'],
                                    ['label' => 'DropdownB', 'url' => '#'],
                                ],
                            ],
                        ]);
                    },
                    'col3' => function () {
                        return WidgetFacade::echo2Return(function () {
                            Modal::begin([
                                'title' => 'ModalB4 title',
                                'bodyOptions' => [
                                    'class' => 'text-center',
                                ],
                                'toggleButton' => [
                                    'label' => 'ModalB4 btn',
                                    'class' => 'layui-btn layui-btn-sm layui-btn-primary',
                                ],
                            ]);
                            echo implode("\n", array_fill(0, 100, 'ModalB4 content'));
                            Modal::end();
                        });
                    },

                ]);
        } else {
            $tableBuilder->setPartial(!!@$this->get['_partial'])
                ->setTitle('手风琴')
                ->setTableHead([
                    $this->tableHead->field('col1')->title('手风琴'),
                    $this->tableHead->field('col2')->title('下拉菜单'),
                    $this->tableHead->field('col3')->title('模态框'),
                ])
                ->setPage(true)
                ->setLineStyle([
                    'height' => 'auto',
                ])
                ->setToolbarRefresh()
                ->setColumnFilter();
        }
        return $tableBuilder->render();
    }
}